
<template>
	<div class="wallet-button">
		<template v-if="!isLogin">
			<a href="" class="link" @click.prevent="openWallet()">{{lang.wallet_conn[lp]}}</a>
		</template>
		<template v-else>
			<a href="" class="link linked" @click.prevent="openWallet()">
				<img src="/images/icon_XG.png" alt="">
				<span>{{tornlinkToken.token|token}}</span>
				<span class="c-999">&nbsp;|&nbsp;</span>
				<span>{{xg.name + lang.balance[lp]}}：{{tornlinkToken.balance|num}}</span>
			</a>
		</template>
		<!----------------------------------錢包資料窗口---------------------------->
		<el-dialog :title="lang.wallet_conn[lp]" width="500px" top="calc(50vh - 250px)" :visible.sync="linkWalletVisible"
		           :before-close="walletClose">
			<div class="my-wallet">
				<!-- 未連接錢包狀態 -->
				<template v-if="!isLogin">
					<div class="normal" v-if="walletFlag==1">
						<div class="logo center"><img src="/images/icon_XG.png" alt=""></div>

						<!--電腦顯示-->
						<div class="hidden-xs hidden-sm">
							<div class="wallet-item flex" @click="ToTronLink">
								<img src="@/assets/tronlink.png" alt="" height="40">
								<span class="f24">{{lang.wallet[lp]}}</span>
							</div>
							<div class="mt40">
								<span>{{lang.wallet_tip1[lp]}} TronLink？ </span>
								<a class="f16 c-red" href="https://chrome.google.com/webstore/detail/tronlink%EF%BC%88%E6%B3%A2%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%89/ibnejdfjmmkpcnlpebklmnkoeoihofec">{{lang.wallet_tip3[lp]}}→</a>
							</div>
							<div class="mt10">
								<span>{{lang.wallet_tip2[lp]}}： </span>
								<a class="f16 c-red" href="https://tron7010.zendesk.com/hc/zh-cn/articles/360027201212-%E4%B8%AD%E5%9B%BD%E5%A4%A7%E9%99%86%E7%94%A8%E6%88%B7%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97-%E6%8F%92%E4%BB%B6%E5%8F%8AiOS-">{{lang.wallet_tip3[lp]}}→</a>
							</div>
						</div>
						<!--手機顯示-->
						<div class="mt40 visible-xs visible-sm">
							<span>{{lang.wallet_tip2_2[lp]}}：</span>
							<a class="f16 c-red" href="https://bitkeep.com/">{{lang.wallet_tip3[lp]}}→</a>
						</div>
					</div>
					<div class="initialize center" v-if="walletFlag==2">
						<div class="flex flex-ai-c flex-jc-sb">

							<span class="b f16 pointer" @click="walletFlag=1"><i class="c-333 f20 fa fa-chevron-left"></i>后退 </span>
							<span class="f16"><img src="@/assets/tronlink.png" alt="" height="20">{{lang.wallet[lp]}}</span>
						</div>
						<div class="mt20"><i class="c-333 f80 fa fa-circle-o-notch fa-spin"></i></div>
						<div class="mt10 f24">{{lang.wallet_tip4[lp]}}</div>
						<div class="mt20">
							{{lang.wallet_tip5[lp]}}
							<a class="c-blue" href="https://chrome.google.com/webstore/detail/tronlink%EF%BC%88%E6%B3%A2%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%89/ibnejdfjmmkpcnlpebklmnkoeoihofec">
								{{lang.wallet[lp]}} </a>{{lang.wallet_tip6[lp]}}
						</div>
					</div>
				</template>
				<!--已鏈接錢包-->
				<template v-else>
					<div class="bgf0 p20">
						<div class="flex">
							<div class="">
								<div class="">{{lang.wallet_tip7[lp]}} TronLink</div>
								<span class="c-blue b copytext">{{tornlinkToken.token}}</span>
								<span class="JS-copy pointer"><i class="c-333 f20 fa fa-file"></i>{{lang.copy[lp]}}</span>
							</div>

						</div>
					</div>
					<div class="logo center mt20"><img src="/images/icon_XG.png" alt=""></div>
					<div class=" center f24">{{tornlinkToken.balance|num}}</div>
					<div class="mt10 center">{{xg.name}} {{lang.balance[lp]}}</div>
				</template>

			</div>
		</el-dialog>
	</div>
</template>

<script type="text/javascript">

	/*加载资源*/
	import { lang_wallet } from '@/libs/lang'
	import { mixins } from '@/mixins/mixins' //公共混入
	import { mixinsUtils } from '@/mixins/mixins.utils'
	// import { mapState,mapGetters } from 'vuex'
	import { balanceOf, hex2Num } from '@/libs/tron.lib' //vuex工具


	export default {
		name:"wallet",
		components: {},
		mixins:[mixins,mixinsUtils],
		props:[],
		data () {
			return {
				lang:Object.freeze(lang_wallet),
				linkWalletVisible: false, //錢包窗口是否顯示
				walletFlag: 1, //連接錢包的顯示標記，1為默認，2為初始化
				timeHandler : null,
			};
		},
		computed:{
		},
		created () {

		},
		mounted () {

		},
		methods:{
			//關閉錢包窗口
			walletClose (done) {
				done()
			},

			//右上角點擊錢包按鈕
			openWallet () {
				let that = this
				that.linkWalletVisible = true;

				//如果有登录，加载即时的xg余额,此处已review
				if (that.isLogin) {
					balanceOf(that.xg.address, that.sender, (hold) => {
						that.tornlinkToken.balance = hex2Num(hold, that.xg.decimal);
					});
				}
			},


			//我的錢包中點擊tronlink錢包,此处已review
			ToTronLink () {
				let that = this
				that.walletFlag = 2
				// 用于判断网站登录状态为假，但是钱包又有登录后的账号token的抽疯情况，刷新页面。
				clearInterval(that.timeHandler)
				that.timeHandler = setInterval(() => {
					if (this.isLogin === false) {
						if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
							window.location.reload();
						}
					}
				}, 2000);
			},
		}
	};
</script>

<style lang="less">

	/*公共变量*/
	@import '~@/assets/global.less';

	.wallet-button {margin-left: 5px;}
	.wallet-button .link{
		color:@blue;font-size:14px;background:#fff;padding:8px 20px;border-radius: 50px;
		display: flex;align-items: center;justify-content: center;
	}
	.wallet-button .link img{height: 20px;}
	.wallet-button .linked{color:#000;background: #ffffff !important;}


	/**********************适应************************/
	@media screen and (max-width: @MINSCREEN){
		.wallet-button {margin-left: 0px;}
		.wallet-button .link{margin:0px 10px;padding: 5px 10px;}
		.wallet-button .link img{height: 26px;}
	}
</style>
